<template>
  <yd-layout class = "spike">
    <v-header slot="navbar" title = "秒杀专区">
      <router-link to="/" slot="left">
        <yd-navbar-back-icon></yd-navbar-back-icon>
      </router-link>
    </v-header>
    <yd-tab v-model="activeIndex">
      <yd-tab-panel :label="item.label" v-for = '(item, index) in activeLi' :key = "index">
        <div class="body">
          <div class="flex average nav">
            <div :class="['tk-grid-6', 'adver', {'ml': index > 0}]" v-for="(item, index) in advertisingLi" :key="index">
              <box :bgImg="item.imgSrc" prop = "98:182"></box>
            </div>
          </div>
          <div class="comm">
            <div class="flex middle comm_li" v-for = "(item, index) in commLi" :key = "`0${index}`">
              <box :bgImg = "item.imgSrc" class = "comm_logo"></box>
              <div class="comm_con">
                <p class = "title"><span>{{ item.source }}</span> <span>{{ item.commName }}</span><span>{{ item.capacity }}</span><span>{{ item.weight }}</span></p>
                <p class = 'desc'>兑换：<span>{{ item.integral + item.price }}</span></p>
                <p>市场价： <span>{{ item.originalPrice }}</span></p>
              </div>
              <div class="text-right comm_time">
                <p class = "time">距离结束: {{ item.endTime }}</p>
                <yd-button type="primary">去抢购</yd-button>
              </div>
            </div>
          </div>
        </div>
      </yd-tab-panel>
    </yd-tab>
  </yd-layout>
</template>
<script>
export default {
  name: 'spike',
  data () {
    return {
      activeIndex: 0,
      activeLi: [],
      advertisingLi: [],
      commLi: []
    }
  },
  created () {
    this.activeLi = [{
      label: '全部'
    }, {
      label: '分类1'
    }, {
      label: '分类2'
    }]
  },
  watch: {
    activeIndex: {
      immediate: true,
      handler (val) {
        this.init(val)
      }
    }
  },
  methods: {
    init (val) {
      this.advertisingLi = [{
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
      }, {
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
      }]
      this.commLi = [{
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        source: '北四县自产',
        commName: '旬邑苹果',
        capacity: '80-85mm12枚',
        weight: '约6斤',
        integral: '1000积分',
        price: '￥66.90',
        originalPrice: '96.90',
        endTime: '12:00:00'
      }, {
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        source: '北四县自产',
        commName: '旬邑苹果',
        capacity: '80-85mm12枚',
        weight: '约6斤',
        integral: '1000积分',
        price: '66.90',
        originalPrice: '96.90',
        endTime: '12:00:00'
      }, {
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        source: '北四县自产',
        commName: '旬邑苹果',
        capacity: '80-85mm12枚',
        weight: '约6斤',
        integral: '1000积分',
        price: '66.90',
        originalPrice: '96.90',
        endTime: '12:00:00'
      }, {
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        source: '北四县自产',
        commName: '旬邑苹果',
        capacity: '80-85mm12枚',
        weight: '约6斤',
        integral: '1000积分',
        price: '66.90',
        originalPrice: '96.90',
        endTime: '12:00:00'
      }]
    }
  }
}
</script>
<style lang="scss" scoped>
  .spike{
    .body{
      padding: 0 $padding;
      .nav{
        background-color: #fff;
        padding: $mini-padding 0;
      }
      .comm{
        background-color: #fff;
        overflow: hidden;
        .comm_li{
          margin: .1rem 0;
          padding: .1rem;
          background-color: #eee;
          .comm_logo{
            width: 1.44rem;
          }
          .comm_con{
            padding-left:$large-padding;
            box-sizing: border-box;
            flex: 3;
            .title{
              span{
                margin-right: .1rem;
              }
            }
            .desc{
              margin: .1rem 0;
            }
          }
          .comm_time{
            flex: 2;
            box-sizing: border-box;
            .time{
              margin-bottom: .5rem;
            }
          }
        }
      }
    }
  }
</style>
